<template>
  <div class="adminBody">
    <div style="display: flex;align-items: center">
      <h2>vue项目配置成多页面多入口</h2>
      <span>http://172.17.6.19:8080/admin.html</span>
      <el-button type="primary" link @click="toApp" style="margin-left: 10px">跳转到APP</el-button>
    </div>
    <div style="display: flex">
      <div>
        <h3>组合式 API</h3>
        <h4>vue3使用render函数创建组件</h4>
        <html-content></html-content>
        <br>
        <el-button type="primary" @click="increment">increment</el-button>
        <p id="counter">{{ count }}</p>
        {{myName}}
      </div>
      <div style="margin-left: 50px">
        <h3>选项式 API</h3>
      </div>
    </div>
  </div>
</template>

<!-- 组合式 API -->
<script setup>
import {h, ref, nextTick, defineCustomElement, reactive} from "vue";
import {ElButton} from "element-plus";

const htmlContent = {
  // template模板编译 -> dom渲染函数 -> 渲染器遍历 -> 真实dom -> dom对比 -> 更新
  render: function () {
    return h("div", {className: "app", style: {border: '1px solid red'}}, [
      h("h3", {className: "title"}, "render标题"),
      h("p", null, "render内容"),
      h(ElButton,
          {
            type: 'success',
            size: 'big',
            onClick: function (v) {
              alert('h函数渲染ElButton，触发点击事件')
            },
            onMouseenter: function (v) {
            }
          }, 'elButton')
    ])
  }
}
const toApp = () => {
  window.location.href = "/comlibrary/webSocket";
}
const count = ref(0)
async function increment() {
  count.value++
  // DOM 还未更新
  console.log('DOM 还未更新', document.getElementById('counter').textContent)
  await nextTick()
  // DOM 此时已经更新
  console.log('DOM 此时已经更新', document.getElementById('counter').textContent)
}
const myName = reactive({
  firstName: 'firstName',
  lastName: 'lastName'
})
const publicPath = process.env.NODE_ENV === 'production' ? './' : '/'
console.log('publicPath', publicPath, process.env.NODE_ENV)
</script>

<!-- 选项式 API -->
<script>
export default {
  data: function () {
    return {
      info: '123'
    }
  },
  methods: {
    add: function () {
    }
  },
  mounted() {
    console.log('选项式 API this', this)
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

#admin {
  width: 100%;
  height: 100vh;
}

.adminBody {
}
</style>
